<template>
	<view class="payrecord">
		<view class="pay-title">
			<view class="tag">
				缴费类别 ◢
			</view>
			<view class="tag" @click="show = true">
				选择时间 ◢
			</view>
			<up-datetime-picker :show="show" v-model="value1" mode="date" @cancel="show = false"></up-datetime-picker>
		</view>
		<view class="pay-content" v-for="item in data" :key="item.id">
			<view class="content-title">
				{{item.mounth}}
			</view>
			<view class="item" v-for="item1 in item.children" :key="item1.id" @click="godetails">
				<view class="" style="display: flex;align-items: center;">
					<view class="left">
					</view>
					<view class="content">
						<view class="">
							{{item1.name}}
						</view>
						<view class="date">
							<text>{{item1.data}} {{item1.cardid}}</text>
						</view>
					</view>
				</view>
				<view class="right">
					-{{item1.price}}
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue';
	import {
		getPayment
	}
	from '../../../../api/serverData'
	const show = ref(false);
	const value1 = ref(Date.now());
	let data = ref([])
	onMounted(() => {
		getPayment().then(res => {
			data.value = res.data
		})
	})
	const godetails = () => {
		uni.navigateTo({
			url: "/pages/server/views/PayRecordDetails/PayRecordDetails"
		})
	}
</script>

<style lang="scss">
	.payrecord {
		height: calc(100vh - 60rpx);
		padding: 30rpx;
		background-color: #fdfeff;

		.pay-content {
			.content-title {
				padding: 30rpx;
			}

			.item {
				padding: 30rpx;
				margin-bottom: 30rpx;
				border: 2rpx solid #f2f2f2;
				background-color: white;
				display: flex;
				justify-content: space-between;

				.date {
					color: #cdd1db;
					font-size: 26rpx;
				}

				.left {
					width: 64rpx;
					height: 64rpx;
					background-color: #e6f1ff;
					border-radius: 50%;
					margin-right: 25rpx;
				}

				.content {
					line-height: 50rpx;
				}

				.right {
					font-size: 30rpx;
					color: #f46363;
				}
			}
		}

		.pay-title {
			display: flex;

			.tag {
				margin-right: 30rpx;
				background-color: #e4f0ff;
				color: #036eff;
				padding: 8rpx 30rpx;
				font-size: 28rpx;
				border-radius: 100rpx;
			}
		}
	}
</style>